<template>
  <el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
    <div>
      <div>
        <el-form :inline="true" :model="filter">
          <el-form-item prop="department_id">
            <el-select
              v-model="filter.department_id"
              placeholder="科室"
              clearable
              @change="searchInput"
            >
              <el-option
                v-for="item in deptList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="name">
            <el-input v-model="filter.name" placeholder="姓名" @input="searchInput" />
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
            <el-button @click="reset(ruleFormRef)">重置</el-button>
          </el-form-item> -->
        </el-form>
      </div>
      <div class="table-inner">
        <el-table
          class="table"
          v-loading="loading"
          :data="persList"
          border
          @selection-change="handleSelectionChange"
        >
          <template #empty><el-empty description="暂无数据" /></template>
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="name" label="姓名" align="center" />
          <el-table-column prop="mobile" label="联系电话" align="center" />
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:currentPage="persQuery.page"
          v-model:pageSize="persQuery.limit"
          :total="persTotal"
          background
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
import { reactive, ref } from 'vue'
import { personnelList, departmentList, addRoomPerso, editRoomPerso, roomPerso } from '@/api/admin'
import { useRoute } from 'vue-router'
const route = useRoute()
const loading = ref()
const persList = ref()
const persTotal = ref(0)
const persQuery = reactive({
  department_id: route.query.deptId || '',
  isnotinroomid: route.query.roomId || '',
  page: 1,
  limit: 10,
})
const filter = reactive({
  department_id: '',
  name: '',
})
const deptList = ref()
const checkList = ref()
const dialogVisible = ref<boolean>(false)
const title = ref('新增人员')

const saveLoading = ref(false)
const emit = defineEmits<{ (event: 'refresh'): void }>()

const ruleForm = reactive({
  platform_id: route.query.id || '',
  room_id: route.query.roomId || '',
  personnel_id: '',
  status: 1,
})

function close() {
  delete ruleForm.id
  ruleForm.personnel_id = ''
  ruleForm.status = 1
  persQuery.page = 1
  persList.value = []
}

const show = (item = {}) => {
  title.value = '新增人员'
  if (item.id) {
    title.value = '编辑人员'
  }
  if (route.query.id == 'null' || route.query.id == 'undefined') {
    ruleForm.platform_id = ''
  }
  dialogVisible.value = true
  getPersList()
  getDeptList()
}

const getPersList = () => {
  loading.value = true
  personnelList(persQuery).then((res) => {
    if (res.code == 200) {
      persList.value = res.data.data
      persTotal.value = res.data.count
    }
    loading.value = false
  })
}
const getDeptList = () => {
  departmentList({ platform_id: route.query.id, selectFields: 'id,name' }).then((res) => {
    if (res.code == 200) {
      deptList.value = res.data
    }
  })
}

const handleClose = async (done: () => void) => {
  if (checkList.value && checkList.value.length > 0) {
    let ids = []
    checkList.value.forEach((item) => {
      ids.push(item.id)
    })
    ruleForm.personnel_id = ids.join(',')
  } else {
    ElMessage.warning('请选择要添加的人员！')
    return
  }
  saveLoading.value = true
  if (ruleForm.id) {
    //编辑
    editRoomPerso(ruleForm).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: '编辑成功',
          message: res.msg,
          type: 'success',
        })
        emit('refresh')
        dialogVisible.value = false
      }
      saveLoading.value = false
    })
  } else {
    //新增
    addRoomPerso(ruleForm).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: '添加成功',
          message: res.msg,
          type: 'success',
        })
        emit('refresh')
        dialogVisible.value = false
      }
      saveLoading.value = false
    })
  }
}

const handleSizeChange = (val: number) => {
  persQuery.page = 1
  persQuery.limit = val
  getPersList()
}

const handleCurrentChange = (val: number) => {
  persQuery.page = val
  getPersList()
}

const handleSelectionChange = (val) => {
  checkList.value = val
}

const searchInput = (type) => {
  persQuery.filter = JSON.stringify(filter)
  persQuery.page = 1
  getPersList()
}

defineExpose({
  show,
})
</script>
<style lang="scss" scoped>
.pagination {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}
</style>

